<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import getAssetsImages from '@/utils/assetsImages'

const router = useRouter()
const iconList = ref([
  { icon: 'user', label: '会员中心', path: '/user/home' },
  { icon: 'carts', label: '购物车', path: '/cart' },
  { icon: 'notification', label: '消息', path: '/user/home/memberCenter/messageList' },
  { icon: 'collage', label: '收藏', path: '/user/home/memberCenter/myFavorites' },
  { icon: 'back', label: '顶部', path: 'back' },
])
// 侧栏bar点击事件
function handleClickIcon(val: any) {
  if (val.path === 'back')
    scrollToTop()
  else
    router.push(val.path)
}
// 定义一个方法来处理滚动到顶部的操作
function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' }) // 平滑滚动到顶部
}
onMounted(() => {

})
</script>

<template>
  <div class="shadow-box">
    <div
      v-for="(item, index) in iconList" :key="index" class="shadow-item flex-j-c flex flex-a-c"
      @click="handleClickIcon(item)"
    >
      <img class="icon" :src="`${getAssetsImages(`${item.icon}.png`, 'iconfont')}`">
      <div class="shadow-label">
        {{ item.label }}
      </div>
      <div v-if="iconList.length - 1 !== index" class="line" />
    </div>
  </div>
</template>

<style scoped lang="less">
.shadow-box {
  width: 64px;
  height: 354px;
  border-radius: 10px;
  opacity: 1;

  background: #ffffff;

  box-shadow: 0px 1px 10px 0px rgba(154, 154, 154, 0.5);
}

.shadow-label {
  font-size: 13px;
  font-weight: normal;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0px;
  color: #666666;
}

.icon {
  margin-top: 15px;
  width: 20px;
  height: 20px;
  margin-bottom: 5px;
}

.shadow-item {
  cursor: pointer;
  flex-direction: column;
  height: 70px;

  > .line {
    width: 34px;
    height: 1px;
    opacity: 1;
    margin-top: 17px;
    border: 0.7px solid #eaeaea;
  }
}
</style>
